<template>
  <div>
        <swiper 
            :indicator-dots="indicatorDots"
            :autoplay="autoplay" 
            :interval="interval" 
            :duration="duration"
            :circular="circular"
            class="swiper"
        >
        <block v-for="(item,index) in swiperImgList" :key="index">
            <swiper-item>
                <img class="swiper-img" :src="item.url" mode="widthFix">
            </swiper-item>
        </block>
    </swiper>
  </div>
</template>

<script>
export default {
    data(){
        return {
            indicatorDots: false,  //是否显示面板指示点
            autoplay: true, //是否自动播放
            interval: 15000,//时间间隔
            duration: 500, //动画滑动时长
            circular: true, //是否采用衔接滑动
            swiperImgList:[
                {
                    url: "/static/images/zhengfeng1.jpg",
                },
                {
                    url: "/static/images/zhengfeng2.jpg",
                }
            ],
        }
    }
}
</script>

<style lang="scss" scoped>
    .swiper{
        width: 100%;
        height: 100vh;
        background-color: #fff;
        .swiper-img{
            width: 100%;
            height: 100vh;
        }
    }
</style>